<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <div>
      <div style="display: flex">
        <div id="popup">
          <a-input-search
            placeholder="请输入查询卡号"
            search-button
            v-model="cardNum"
            style="width: 320px"
            @press-enter="cardSeachFn"
            button-text="确认查询"
            @search="cardSeachFn"
            @focus="tipFn"
          >
            <template #prefix>
              <img
                style="width: 17px; height: 17px; margin-right: 10px"
                src="@/assets/card.png"
                alt=""
              />
              <span style="background-color: #c9cdd4; height: 10px; width: 1px"></span>
            </template>
          </a-input-search>
          <div v-if="showTip" class="contex-menu-wrapper"
            ><a-table
              :data="loaclCard"
              :pagination="{ defaultPageSize: 5 }"
              page-position="bottom"
              @cell-click="cell"
            >
              <template #columns>
                <a-table-column title="卡号" :width="200" data-index="card" />
                <a-table-column title="操作时间" data-index="time" />
                <a-table-column title="操作" data-index="address">
                  <template #cell="{ record }">
                    <a-button
                      @click.stop="useCommon.copy(record.card)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >复制</a-button
                    >
                    <a-button
                      @click.stop="del(record.card)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >删除</a-button
                    >
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </div>
        </div>
        <div v-if="cardDetail.id" @click="openDetection" style="height: 35px">
          <div
            v-if="
              (!cardDetail.exceptionType &&
                cardDetail.officialRealName == 0 &&
                cardDetail.free > 0 &&
                cardDetail.firstPayTime &&
                cardDetail.state == 0) ||
              (!cardDetail.exceptionType &&
                cardDetail.officialRealName == 0 &&
                !cardDetail.free &&
                cardDetail.firstPayTime &&
                cardDetail.state == 0)
            "
            style="color: #3491fa; line-height: 35px; padding: 0 10px"
            >检测结果一切正常!</div
          >

          <div
            v-else
            class="namesa"
            style="color: red; display: flex; align-items: center; height: 35px"
          >
            <a-tooltip content="智能检测结果可能存在延迟，建议刷新卡成功后再看检测结果">
              <span style="display: flex; align-items: center; cursor: pointer"
                ><img
                  style="width: 15px; height: 15px; margin: 0 10px"
                  src="@/assets/red.png"
                  alt=""
                />
                检测结果:
                <span v-if="cardDetail.state != 0">当前卡号状态异常</span>
                <span v-else-if="!cardDetail.firstPayTime">当前卡号未充值套餐</span>
                <span v-else-if="cardDetail.officialRealName !== 0">当前卡号未官方实名</span>
                <span v-else-if="cardDetail.free <= 0 && cardDetail.firstPayTime"
                  >可用流量已用尽</span
                >
                <span v-else-if="cardDetail.free <= 0">当前流量已用完</span>
                <span v-else-if="cardDetail.chong">{{ cardDetail.chong }}</span>
                <span v-else-if="cardDetail.disconnectionId">达量断网停机</span>
                <span v-else-if="cardDetail.free">
                  <span v-if="cardDetail.free + cardDetail.used <= 0 && !cardDetail.firstPayTime"
                    >当前卡号未充值本月套餐</span
                  >
                  <span
                    v-else-if="
                      cardDetail.state == 4 &&
                      !cardDetail.exceptionType &&
                      cardDetail.firstPayTime &&
                      cardDetail.free > 0
                    "
                    >网络异常</span
                  >
                </span>
                <span v-else-if="!cardDetail.free">
                  <span v-if="cardDetail.used <= 0 && !cardDetail.firstPayTime"
                    >当前卡号未充值本月套餐</span
                  >
                  <span
                    v-else-if="
                      cardDetail.state == 4 && !cardDetail.exceptionType && cardDetail.firstPayTime
                    "
                    >网络异常</span
                  >
                </span></span
              >
            </a-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <!-- <a-collapse v-model:active-key="detailList" expand-icon-position="right">
        <a-collapse-item key="1">
          <template #header>
            <div style="display: flex; align-items: center">
              <div class="box">
                <div class="line"></div>
                <div class="text">卡板基本信息</div>
              </div>
              <div
                style="margin-left: 10px; display: flex; align-items: center"
                v-if="cardDetail.id && cardDetail.ipAddress"
              >
                <img style="width: 15px; height: 15px" src="@/assets/ding.png" alt="" />
                <span style="margin-left: 10px; color: #3491fa; font-size: 13px"
                  >当前使用位置：{{ cardDetail.ipAddress }}</span
                >
              </div>
            </div>
          </template>
          <template #extra>
            <div>{{ detailList.length == 1 ? '收起' : '展开' }}</div>
          </template> -->
      <a-descriptions
        bordered
        :column="4"
        align="left"
        style="margin-top: 10px; background-color: var(--color-bg-2); border-radius: 10px"
      >
        <a-descriptions-item label="显示卡号"
          ><span v-if="cardDetail.card" @click="useCommon.copy(cardDetail.card)">
            {{ cardDetail.card }}
          </span>
          <span v-else>- - -</span></a-descriptions-item
        >
        <!-- <a-descriptions-item label="IMEI"
              ><span v-if="cardDetail.imei">{{ cardDetail.imei }}</span>
              <span v-else>- - -</span></a-descriptions-item
            >
            <a-descriptions-item label="IMSI"
              ><span v-if="cardDetail.imei">{{ cardDetail.imei }}</span>
              <span v-else>- - -</span></a-descriptions-item
            > -->
        <a-descriptions-item label="所属系列"
          ><span v-if="cardDetail.seriesId">{{
            cardDetail.series.showName
          }}</span></a-descriptions-item
        >
        <!-- <a-descriptions-item label="卡板余额"
              ><span v-if="cardDetail.balance">{{ cardDetail.balance }} 元</span>
              <span v-else>- - -</span></a-descriptions-item
            > -->
        <a-descriptions-item label="卡板状态">
          <div class="between">
            <div v-if="cardDetail.id" :color="cardDetail.stateName.color">{{
              cardDetail.stateName.name
            }}</div>
            <span v-else>- - -</span
            ><span
              v-if="cardDetail.id && cardDetail.state !== 0"
              style="margin-left: 5px; color: #f53f3f; cursor: pointer"
              @click="startFn"
              >复机</span
            >
          </div>
        </a-descriptions-item>
        <!-- <a-descriptions-item label="异常类型">
              <div v-if="cardDetail.errorName" color="red">{{ cardDetail.errorName }}</div>
              <div v-else color="arcoblue">正常</div></a-descriptions-item
            > -->
        <a-descriptions-item label="充值状态">
          <div color="blue" v-if="cardDetail.firstPayTime">已充值</div>
          <div v-else>未充值</div></a-descriptions-item
        >
        <a-descriptions-item label="系统实名">
          <div color="blue" v-if="cardDetail.cardRealName">已实名</div>
          <div v-else>未实名</div>
        </a-descriptions-item>
        <a-descriptions-item label="官方实名">
          <div class="between">
            <div color="blue" v-if="cardDetail.officialRealName == 0">已实名</div>
            <div v-else-if="cardDetail.officialRealName == 1">未实名</div>
            <div v-else>未知</div>
            <span
              style="margin-left: 5px; color: #3491fa; cursor: pointer"
              v-if="cardDetail.id && cardDetail.officialRealName"
              @click="RefreshFn(2)"
              >刷新</span
            >
          </div>
        </a-descriptions-item>
        <!-- <a-descriptions-item label="单独断网"
              ><div color="red" v-if="cardDetail.speedLimitTagId">已限速</div>
              <div v-else>未限速</div></a-descriptions-item
            > -->
        <!-- <a-descriptions-item label="达量断网"
              ><div color="red" v-if="cardDetail.speedLimitTagId">已限速</div>
              <div v-else>未限速</div></a-descriptions-item
            > -->
        <!-- <a-descriptions-item label="限速状态"
              ><div color="red" v-if="cardDetail.speedLimitTagId">已限速</div>
              <div v-else>未限速</div></a-descriptions-item
            > -->
        <a-descriptions-item label="注销状态">
          <div color="red" v-if="cardDetail.cancellationGroupId">已注销</div>
          <div v-else>未注销</div></a-descriptions-item
        >
        <a-descriptions-item label="分销状态">
          <div color="red" v-if="cardDetail.userId">已分销</div>
          <div v-else>未分销</div></a-descriptions-item
        >
        <a-descriptions-item label="在线状态">
          <div class="between">
            <div color="blue" v-if="cardDetail.online == 0">在线</div>
            <div v-else-if="cardDetail.online == 1">离线</div>
            <div v-else>未知</div>
            <span
              style="margin-left: 5px; color: #3491fa; cursor: pointer"
              v-if="cardDetail.id"
              @click="onlineFn"
              >刷新</span
            >
          </div>
        </a-descriptions-item>
        <!-- <a-descriptions-item label="机卡分离">
              <div color="red" v-if="cardDetail.cancellationGroupId">已注销</div>
              <div v-else>未注销</div></a-descriptions-item
            > -->
        <!-- <a-descriptions-item label="手机号">
              {{
                cardDetail.cardRealName ? cardDetail.cardRealName.phone : '- - -'
              }}</a-descriptions-item
            > -->
        <a-descriptions-item label="充值次数">
          {{ cardDetail.payNumber ? cardDetail.payNumber : '- - -' }}</a-descriptions-item
        >
        <a-descriptions-item label="客户账号">
          <div class="between">
            <span v-if="cardDetail.user">{{ cardDetail.user.userName }}</span>
            <span v-else>管理员</span
            ><span
              v-if="cardDetail.id"
              style="margin-left: 5px; color: #3491fa; cursor: pointer"
              @click="delimitation"
              >修改</span
            >
          </div>
        </a-descriptions-item>
        <!-- <a-descriptions-item label="客户等级"
              ><span v-if="cardDetail.user">{{ cardDetail.user.grade }}级</span>
              <span v-else>- - -</span></a-descriptions-item
            > -->
        <a-descriptions-item label="首次登陆">
          <span v-if="cardDetail.firstLoginTime">{{ cardDetail.firstLoginTime }}</span>
          <span v-else>- - -</span></a-descriptions-item
        >
        <a-descriptions-item label="最近登录">
          <span v-if="cardDetail.lastLoginTime">{{ cardDetail.lastLoginTime }}</span>
          <span v-else>- - -</span></a-descriptions-item
        >
        <a-descriptions-item label="流量更新">
          <div class="between">
            <span v-if="cardDetail.flowRefreshTime"
              >{{ cardDetail.flowRefreshTime }} →
              {{ useCommon.getTimeDifference(cardDetail.flowRefreshTime) }}</span
            >
            <span
              v-if="cardDetail.id && cardDetail.flowRefreshTime"
              style="margin-left: 5px; color: #3491fa; cursor: pointer"
              @click="RefreshFn(0)"
              >刷新</span
            >
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="状态更新">
          <div class="between">
            <span v-if="cardDetail.stateRefreshTime"
              >{{ cardDetail.stateRefreshTime }} →
              {{ useCommon.getTimeDifference(cardDetail.stateRefreshTime) }}</span
            >
            <span
              v-if="cardDetail.id && cardDetail.stateRefreshTime"
              style="margin-left: 5px; color: #3491fa; cursor: pointer"
              @click="RefreshFn(1)"
              >刷新</span
            >
          </div></a-descriptions-item
        >
        <a-descriptions-item label="实名更新">
          <div class="between">
            <span v-if="cardDetail.realNameRefreshTime"
              >{{ cardDetail.realNameRefreshTime }} →
              {{ useCommon.getTimeDifference(cardDetail.realNameRefreshTime) }}</span
            >
            <span
              v-if="cardDetail.id && cardDetail.flowRefreshTime"
              style="margin-left: 5px; color: #3491fa; cursor: pointer"
              @click="RefreshFn(2)"
              >刷新</span
            >
          </div></a-descriptions-item
        >
      </a-descriptions>
      <!-- </a-collapse-item>
      </a-collapse> -->
    </div>
    <div class="detail">
      <!-- <a-collapse v-model:active-key="detailLists" expand-icon-position="right">
        <a-collapse-item key="1">
          <template #header>
            <div style="display: flex; align-items: center">
              <div class="box">
                <div class="line"></div>
                <div class="text">使用流量信息</div>
              </div>
            </div>
          </template>
          <template #extra>
            <div>{{ detailLists.length == 1 ? '收起' : '展开' }}</div>
          </template> -->
      <a-descriptions
        bordered
        :column="4"
        align="left"
        style="margin-top: 10px; background-color: var(--color-bg-2); border-radius: 10px"
      >
        <a-descriptions-item label="总流量">
          <span v-if="cardDetail.free != undefined">
            {{ Math.floor(((cardDetail.used + cardDetail.free) / 1024) * 100) / 100 }}G
            <!-- <span @click="lishiFn" style="margin-left: 5px; color: #3491fa; cursor: pointer"
                  >历史</span
                > -->
          </span>
          <span v-else>无限</span></a-descriptions-item
        >
        <a-descriptions-item label="已用流量"
          ><span v-if="cardDetail.used != undefined"
            >{{ Math.floor((cardDetail.used / 1024) * 100) / 100 }}G</span
          >
          <span v-else> - - -</span></a-descriptions-item
        >
        <a-descriptions-item label="剩余流量"
          ><span v-if="cardDetail.free != undefined"
            >{{ Math.floor((cardDetail.free / 1024) * 100) / 100 }}G</span
          >
          <span v-else>无限</span></a-descriptions-item
        >
        <a-descriptions-item label="到期时间"
          ><span v-if="time">{{ time }}</span> <span v-else>- - -</span></a-descriptions-item
        >
        <a-descriptions-item v-if="cardDetail.series.channel.api != true" label="生效中套餐"
          >{{ dataList.length > 0 ? dataList[0].setMealName : '- - -' }}
        </a-descriptions-item>
        <a-descriptions-item v-if="cardDetail.series.channel.api != true" label="下一个套餐">
          {{ daiList.length > 0 ? daiList[0].setMealName : '- - -' }}
        </a-descriptions-item>
        <a-descriptions-item v-if="cardDetail.series.channel.api != true" label="待生效">
          {{ daiList.length }}个
        </a-descriptions-item>
        <a-descriptions-item label="最后到期时间">
          <span v-if="cardDetail.expirationTime">{{ cardDetail.expirationTime }}</span>
          <span v-else>- - -</span></a-descriptions-item
        >
      </a-descriptions>
      <!-- </a-collapse-item>
      </a-collapse> -->
    </div>
    <div class="detail">
      <div style="display: flex; justify-content: space-between">
        <div class="box">
          <div class="line"></div>
          <div class="text">生效订单信息</div>
        </div>
        <div style="display: flex">
          <a-checkbox-group
            v-if="cardDetail.series.channel.api == false"
            v-model="checked"
            @change="changes"
          >
            <a-checkbox :value="1" disabled>生效中({{ cardDetail.number1 }})</a-checkbox>
            <a-checkbox :value="0">待生效({{ cardDetail.number3 }})</a-checkbox>
            <a-checkbox :value="2">已失效({{ cardDetail.number2 }})</a-checkbox>
          </a-checkbox-group>
          <a-checkbox-group
            v-if="cardDetail.series.channel.api == true"
            v-model="checked"
            @change="changes"
          >
            <a-checkbox :value="3">全部订单({{ cardDetail.cardOrders.length }})</a-checkbox>
          </a-checkbox-group>
          <div style="margin-right: 15px; cursor: pointer" @click="change">
            {{ show == true ? '收起' : '展开'
            }}<icon-caret-down
              v-if="show == true"
              style="margin-left: 5px; color: var(--color-neutral-7)"
            /><icon-caret-left
              v-if="show == false"
              style="margin-left: 5px; color: var(--color-neutral-7)"
            />
          </div>
        </div>
      </div>
      <div v-if="show == true">
        <a-table
          style="margin-top: 10px"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="dataList"
          :pagination="false"
          :scroll="{ x: 1500 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'setMealName'" #cell="{ record }">
                <span>{{ record.setMealName }}</span>
              </template>
              <template v-if="item.key === 'createTime'" #cell="{ record }">
                <span>{{ record.createTime }}</span>
              </template>
              <template v-if="item.key === 'effectiveState'" #cell="{ record }">
                <div color="blue" v-if="record.effectiveState == 0">立即生效</div>
                <div color="blue" v-else-if="record.effectiveState == 1">本月生效</div>
                <div color="blue" v-if="record.effectiveState == 2">次月生效</div>
                <div color="blue" v-else-if="record.effectiveState == 3">月底顺延</div>
                <div color="blue" v-if="record.effectiveState == 4">跨月顺延</div>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <div color="red" v-if="record.state == 4">退款</div>
                <div color="red" v-else-if="record.state == 3">失败</div>
                <div color="blue" v-else-if="record.state == 2">成功</div>
                <div color="gold" v-else-if="record.state == 1">进行</div>
                <div v-else-if="record.state == 0">等待</div>
                <div color="red" v-else-if="record.state == -1">删除</div></template
              >
              <template v-if="item.key === 'effectiveType'" #cell="{ record }">
                <div color="red" v-if="record.effectiveType == 2">已失效</div>
                <div v-else-if="record.effectiveType == 0">待生效</div>
                <div color="blue" v-else-if="record.effectiveType == 1">已生效</div>
              </template>
              <template v-else-if="item.key === 'setMealType'" #cell="{ record }">
                <a-space>
                  <span v-if="record.setMealType == 0">无限叠加</span>
                  <span v-else-if="record.setMealType == 1">基础套餐</span>
                  <span v-else-if="record.setMealType == 2">叠加包</span>
                  <!-- <span v-else-if="record.setMealType == 3">体验包</span> -->
                </a-space>
              </template>
              <template v-else-if="item.key === 'payType'" #cell="{ record }">
                <div v-if="record.payType == 0"> 余额</div>
                <div v-if="record.payType == 1"> 支付宝</div>
                <div v-if="record.payType == 2"> 微信</div>
                <div v-if="record.payType == 3"> 接口</div>
                <div v-if="record.payType == 4"> 批量</div>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
    <div class="details">
      <div style="display: flex; flex-wrap: wrap">
        <a-spin :loading="refLoad">
          <div class="sq" @click="RefreshFn">
            <img alt="" src="@/assets/onecard/sx.png" class="img" />
            <div>卡板刷新</div>
          </div>
        </a-spin>
        <a-spin :loading="stopLoad">
          <div class="sq" @click="stopFn">
            <img alt="" src="@/assets/onecard/tj.png" class="img" />
            <div>卡板停机</div>
          </div>
        </a-spin>
        <a-spin :loading="startLoad">
          <div class="sq" @click="startFn">
            <img alt="" src="@/assets/onecard/fj.png" class="img" />
            <div>卡板复机</div>
          </div>
        </a-spin>
        <!-- <div class="sq" @click="openDetection">
          <img alt="" src="@/assets/onecard/znjc.png" class="img" />
          <div>智能检测</div>
        </div> -->
        <div class="sq" @click="mealFn">
          <img alt="" src="@/assets/onecard/tccz.png" class="img" />
          <div>套餐充值</div>
        </div>
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/bgsj.png" class="img" />
            <div>变更时间</div>
          </div> -->
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/zykb.png" class="img" />
            <div>转移卡板</div>
          </div> -->
        <div class="sq" @click="doRefreshOrder">
          <img alt="" src="@/assets/onecard/czjl.png" class="img" />
          <div>充值记录</div>
        </div>
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/szxs.png" class="img" />
            <div>设置限速</div>
          </div> -->
        <!-- <div class="sq" @click="balanceFn">
          <img alt="" src="@/assets/onecard/czye.png" class="img" />
          <div>充值余额</div>
        </div> -->
        <!-- <div class="sq" @click="passWordFn">
          <img alt="" src="@/assets/onecard/mm.png" class="img" />
          <div>修改密码</div>
        </div> -->
        <!-- <div class="sq" @click="realNameFno">
          <img alt="" src="@/assets/onecard/smsc.png" class="img" />
          <div>清除官方</div>
        </div> -->
        <!-- <div class="sq" @click="realNameFns">
          <img alt="" src="@/assets/onecard/smsc.png" class="img" />
          <div>清除系统</div>
        </div> -->
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/qkll.png" class="img" />
            <div>清空流量</div>
          </div> -->
        <div class="sq" @click="deleteBindingFn">
          <img alt="" src="@/assets/onecard/jk2.png" class="img" />
          <div>机卡绑定</div>
        </div>
        <!-- <div class="sq" @click="caozuoFn">
          <img alt="" src="@/assets/onecard/cz.png" class="img" />
          <div>操作记录</div>
        </div> -->
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/dl.png" class="img" />
            <div>达量断网</div>
          </div> -->
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/ddw.png" class="img" />
            <div>单独断网</div>
          </div> -->
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/ykym.png" class="img" />
            <div>一卡一码</div>
          </div> -->
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/szwifi.png" class="img" />
            <div>设置wifi</div>
          </div> -->
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/cqsb.png" class="img" />
            <div>重启设备</div>
          </div> -->
        <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/hfcc.png" class="img" />
            <div>恢复出厂</div>
          </div> -->
        <div class="sq" @click="delimitation">
          <img alt="" src="@/assets/onecard/hk.png" class="img" />
          <div>卡板划卡</div>
        </div>
        <div class="sq" @click="openRetrieve">
          <img alt="" src="@/assets/onecard/hs.png" class="img" />
          <div>卡板回收</div>
        </div>
      </div>
    </div>
    <!-- 智能检测 -->
    <a-modal
      v-model:visible="detectionVisible"
      title="智能检测"
      width="610px"
      :mask-closable="false"
      title-align="start"
    >
      <div class="table">
        <div class="title">
          <div class="name">检测类型</div>
          <div class="name">检测描述</div>
          <div class="name">检测结果</div>
        </div>
        <div class="list">
          <div class="names">卡板状态</div>
          <div class="names"
            ><div v-if="cardDetail.id" :color="cardDetail.stateName.color">{{
              cardDetail.stateName.name
            }}</div></div
          >
          <div class="names">
            <span v-if="cardDetail.id && cardDetail.state == 0" style="color: #3491fa">正常</span>
            <span v-else style="color: #f53f3f">异常</span>
          </div>
        </div>
        <div class="list">
          <div class="names">总流量</div>
          <div class="names"
            ><span v-if="cardDetail.free != undefined">
              {{ Math.floor(((cardDetail.used + cardDetail.free) / 1024) * 100) / 100 }}G</span
            >
            <span v-else>无限</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.free == 0" style="color: #f53f3f">异常</span>
            <span v-else style="color: #3491fa">正常</span></div
          >
        </div>
        <div class="list">
          <div class="names">已用流量</div>
          <div class="names"
            ><span v-if="cardDetail.used != undefined"
              >{{ Math.floor((cardDetail.used / 1024) * 100) / 100 }}G</span
            >
            <span v-else> - - -</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.used != undefined" style="color: #3491fa"
              >正常</span
            >
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">剩余流量</div>
          <div class="names"
            ><span v-if="cardDetail.free != undefined"
              >{{ Math.floor((cardDetail.free / 1024) * 100) / 100 }}G</span
            >
            <span v-else>无限</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.free == 0" style="color: #f53f3f">异常</span>
            <span v-else style="color: #3491fa">正常</span></div
          >
        </div>
        <div class="list">
          <div class="names">在线状态</div>
          <div class="names"
            ><span v-if="cardDetail.online === 0">在线</span>
            <span v-if="cardDetail.online === 1">下线</span>
            <span v-else>未知</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.online == 0" style="color: #3491fa">正常</span>
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">官方实名</div>
          <div class="names"
            ><div color="blue" v-if="cardDetail.officialRealName == 0">已实名</div>
            <div v-else-if="cardDetail.officialRealName == 1">未实名</div>
            <div v-else>未知</div></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.officialRealName == 0" style="color: #3491fa"
              >正常</span
            >
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">到期时间</div>
          <div class="names"
            ><span v-if="cardDetail.expirationTime">{{ cardDetail.expirationTime }}</span>
            <span v-else>- - -</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.expirationTime" style="color: #3491fa"
              >正常</span
            >
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">检测结果</div>
          <div
            v-if="
              (!cardDetail.exceptionType &&
                cardDetail.officialRealName == 0 &&
                cardDetail.free > 0 &&
                cardDetail.firstPayTime &&
                cardDetail.state == 0) ||
              (!cardDetail.exceptionType &&
                cardDetail.officialRealName == 0 &&
                !cardDetail.free &&
                cardDetail.firstPayTime &&
                cardDetail.state == 0)
            "
            class="namesa"
            style="color: #3491fa; line-height: 25px; padding: 10px"
            >检测结果一切正常，若仍然无法使用，请引导客户设置APN然后重启设备，等待5分钟后重试【无需设置APN的请直接忽略】</div
          >
          <div v-else class="namesa" style="color: red">
            {{ cardDetail.state != 0 ? '当前卡号状态异常' : '' }}
            {{ !cardDetail.firstPayTime ? '当前卡号未充值套餐' : '' }}
            {{ cardDetail.officialRealName !== 0 ? '当前卡号未官方实名' : '' }}
            {{ cardDetail.firstPayTime && cardDetail.free <= 0 ? '当前卡号未充值本月套餐' : '' }}
            {{ cardDetail.free <= 0 ? '当前流量已用完' : '' }}
            {{ cardDetail.chong }}
            {{ cardDetail.free <= 0 ? '可用流量已用尽' : '' }}
            {{ cardDetail.disconnectionId ? '网络异常请联系客服' : '' }}
            {{
              cardDetail.state == 4 &&
              !cardDetail.exceptionType &&
              cardDetail.firstPayTime &&
              cardDetail.free > 0
                ? '网络异常请执行复机操作'
                : ''
            }}
          </div>
        </div>
        <div class="list">
          <div class="names">快捷操作</div>
          <div class="namesa">
            <span v-if="cardDetail.id" style="color: #3491fa; cursor: pointer" @click="RefreshFn"
              >卡板刷新</span
            >
            <span
              v-if="cardDetail.id"
              style="margin-left: 15px; color: #f53f3f; cursor: pointer"
              @click="stopFn"
              >卡板停机</span
            >
            <span
              v-if="cardDetail.id"
              style="margin-left: 15px; color: #00b42a; cursor: pointer"
              @click="startFn"
              >卡板复机</span
            >
          </div>
        </div>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 充值套餐 -->
    <a-modal
      v-model:visible="mealVisible"
      @before-close="mealCFn"
      title="充值套餐"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="mealRef" :auto-label-width="true" :model="mealForm">
        <a-form-item label="充值套餐" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                hide-asterisk
                field="setMealId"
                validate-trigger="input"
                :rules="[{ required: true, message: '请选择充值套餐' }]"
                asterisk-position="end"
                no-style
              >
                <a-select
                  v-model="mealForm.setMealId"
                  placeholder="请选择充值套餐"
                  allow-search
                  allow-clear
                >
                  <a-option v-for="item in mealList" :key="item.id" :value="item.id">{{
                    item.showName
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="订单时间" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                field="next"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  {
                    required: true,
                    message: '请选择充值类型',
                  },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-radio-group class="radio-bcg" v-model="mealForm.next">
                  <a-radio :value="0">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">本月</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="1">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">次月</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item field="remarks" label="充值备注" asterisk-position="end">
          <a-input v-model="mealForm.remarks" placeholder="请输入充值备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="mealCFn">取消</a-button>
          <a-button type="primary" :loading="mealLoad" @click="mealSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值套餐记录 -->
    <a-modal
      v-model:visible="orderVisible"
      title="充值记录"
      width="50%"
      :mask-closable="false"
      title-align="start"
    >
      <a-table
        :columns="columns1"
        :loading="load1"
        :pagination="false"
        :data="rebateLists"
        :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
      >
        <template #columns>
          <a-table-column
            v-for="item of columns1"
            :key="item.key"
            align="left"
            :width="item.width"
            :title="(item.title as string)"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'setMealName'" #cell="{ record }">
              <span>{{ record.setMealName }}</span>
            </template>
            <template v-if="item.key === 'createTime'" #cell="{ record }">
              <span>{{ record.createTime }}</span>
            </template>
            <template v-if="item.key === 'effectiveState'" #cell="{ record }">
              <div color="blue" v-if="record.effectiveState == 0">立即生效</div>
              <div color="blue" v-else-if="record.effectiveState == 1">本月生效</div>
              <div color="blue" v-if="record.effectiveState == 2">次月生效</div>
              <div color="blue" v-else-if="record.effectiveState == 3">月底顺延</div>
              <div color="blue" v-if="record.effectiveState == 4">跨月顺延</div>
            </template>
            <template v-if="item.key === 'state'" #cell="{ record }">
              <div color="red" v-if="record.state == 4">退款</div>
              <div color="blue" v-else-if="record.state == 3">失败</div>
              <div color="blue" v-else-if="record.state == 2">成功</div>
              <div color="blue" v-else-if="record.state == 1">进行</div>
              <div color="blue" v-else-if="record.state == 0">等待</div>
              <div color="blue" v-else-if="record.state == -1">删除</div></template
            >
            <template v-if="item.key === 'effectiveType'" #cell="{ record }">
              <div color="red" v-if="record.effectiveType == 2">已失效</div>
              <div color="blue" v-else-if="record.effectiveType == 0">待生效</div>
              <div color="blue" v-else-if="record.effectiveType == 1">已生效</div>
            </template>
            <template v-else-if="item.key === 'payType'" #cell="{ record }">
              <div v-if="record.payType == 0"> 余额</div>
              <div v-if="record.payType == 1"> 支付宝</div>
              <div v-if="record.payType == 2"> 微信</div>
              <div v-if="record.payType == 3"> 接口</div>
              <div v-if="record.payType == 4"> 批量</div>
            </template>
            <!-- <template v-if="item.key === 'action'" #cell="{ record }">
              <a-space :size="2">
                <a-button
                  style="margin-right: 5px; padding: 0px"
                  type="text"
                  size="small"
                  @click="delOrder(record)"
                  >删除</a-button
                >
              </a-space>
            </template> -->
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 分销操作 -->
    <a-modal
      v-model:visible="huakavisible"
      @before-close="handleCancelhuaka"
      title="分销操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="huakaForms" :model="huakaForm" :auto-label-width="true">
        <a-form-item
          field="userId"
          label="分销客户"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '客户不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="huakaForm.userId"
            placeholder="请选择客户"
            allow-search
            allow-clear
            :options="userList"
            :virtual-list-props="{ height: 200 }"
          />
        </a-form-item>

        <a-form-item
          field="remarks"
          label="分销备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-input v-model="huakaForm.remarks" placeholder="请输入划卡备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="huakavisible = false">取消</a-button>
          <a-button type="primary" :loading="huankaLoad" @click="handleBeforeOkhuakas"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 回收操作 -->
    <a-modal
      v-model:visible="retrieveVisible"
      @before-close="handleCancelRetrieve"
      title="回收操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="retrieveForms" :model="retrieveForm" :auto-label-width="true">
        <a-form-item
          field="remarks"
          label="回收备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-input v-model="retrieveForm.remarks" placeholder="请输入回收备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="retrieveVisible = false">取消</a-button>
          <a-button type="primary" :loading="retrieveLoad" @click="handleBeforeOkRetrieves"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts">
  export default {
    name: 'OneCard',
  }
</script>

<script setup lang="ts">
  import {
    oneCardUrl,
    refresh,
    stop,
    start,
    userMeal,
    binding,
    orderpay,
    postDisOrder,
    recoveryPostDisOrder,
  } from '@/api/user'
  import useCommonStore from '@/store/modules/common'
  import { get, formpost } from '@/api/http'
  import { reactive, ref, watch } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  const useCommon = useCommonStore()
  const cardNum = ref('')
  const refLoad = ref(false)
  const stopLoad = ref(false)
  const startLoad = ref(false)
  const cardDetail: any = ref({
    series: { channel: {} },
    stateName: {},
  })
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const checked = ref([1])
  const show = ref(true)
  const detailLists = ref(['1'])
  const dataList: any = ref([])
  const daiList: any = ref([])
  const detailList = ref(['1'])
  const tableColumns: any = reactive({
    list: [
      {
        title: '套餐名称',
        key: 'setMealName',
        dataIndex: 'setMealName',
        checked: true,
        width: 220,
      },
      {
        title: '套餐类型',
        key: 'setMealType',
        dataIndex: 'setMealType',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '订单时间',
        key: 'effectiveState',
        dataIndex: 'effectiveState',
        checked: true,
        width: 100,
      },

      {
        title: '生效状态',
        key: 'effectiveType',
        dataIndex: 'effectiveType',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '生效时间',
        key: 'effectiveTime',
        dataIndex: 'effectiveTime',
        checked: true,
        width: 190,
      },
      {
        title: '到期时间',
        key: 'expirationTime',
        dataIndex: 'expirationTime',
        checked: true,
        width: 190,
      },
    ],
  })
  const showTip = ref(false)
  //刷新在线状态
  function onlineFn() {
    get({
      url: '/app/user/card/online',
      data: () => {
        return {
          id: cardDetail.value.id,
        }
      },
    }).then((res: any) => {
      if (res.code == 0) {
        Message.success('刷新成功')
        cardSeachFn()
      }
    })
  }
  function tipFn() {
    if (localStorage.getItem('cardse')) {
      loaclCard.value = JSON.parse(localStorage.getItem('cardse'))
    }

    if (loaclCard.value.length > 0) {
      showTip.value = true
    }
  }

  function cell(val: any) {
    cardNum.value = val.card
    showTipClose()
    cardSeachFn()
  }

  watch(
    () => showTip.value,
    (newVal) => {
      console.log(newVal)
      if (newVal) {
        var popup = document.getElementById('popup') // 获取弹窗元素
        document.addEventListener('click', function (event) {
          var targetElement = event.target // 获取点击的目标元素

          if (targetElement !== popup && !popup.contains(targetElement)) {
            showTipClose() // 调用关闭弹窗的函数
          }
        })
      } else {
        document.body.removeEventListener('click', showTipClose)
      }
    }
  )
  function del(val: any) {
    loaclCard.value.forEach((item: any, index) => {
      if (item.card == val) {
        loaclCard.value.splice(index, 1)
      }
    })
    localStorage.setItem('cardse', JSON.stringify(loaclCard.value))
  }

  function showTipClose() {
    showTip.value = false
  }
  function changes() {
    dataList.value = []
    if (cardDetail.value.series.channel.api) {
      const includes = checked.value.includes(3)
      if (includes) {
        dataList.value = rebateLists.value
      } else {
        checked.value.forEach((item: any) => {
          rebateLists.value.forEach((items: any) => {
            if (item == items.effectiveType) {
              dataList.value.push(items)
            }
          })
        })
      }
    } else {
      checked.value.forEach((item: any) => {
        rebateLists.value.forEach((items: any) => {
          if (item == items.effectiveType) {
            dataList.value.push(items)
          }
        })
      })
    }
  }
  function change() {
    show.value = !show.value
  }
  //卡板回收
  const retrieveForms = ref()
  const retrieveLoad = ref(false)
  const retrieveVisible = ref(false)
  const retrieveForm = ref({
    remarks: '',
    cardMultiline: '',
  })

  function openRetrieve() {
    if (cardDetail.value.id) {
      retrieveForm.value.cardMultiline = cardDetail.value.card
      retrieveVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function handleCancelRetrieve() {
    retrieveForms.value?.resetFields()
    retrieveVisible.value = false
  }
  const handleBeforeOkRetrieves = () => {
    retrieveForms.value?.validate().then((error: any) => {
      if (!error) {
        retrieveLoad.value = true
        formpost({
          url: recoveryPostDisOrder,
          data: () => {
            return {
              remarks: retrieveForm.value.remarks,
              cardMultiline: retrieveForm.value.cardMultiline,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              if (res.data.error > 0) {
                Message.error('无法回收此卡')
              } else {
                Message.success('回收成功')
                cardSeachFn()
                handleCancelRetrieve()
                retrieveLoad.value = false
              }
            }
          })
          .catch(() => {
            retrieveLoad.value = false
          })
      }
    })
  }

  //卡板分销
  const huakaForms = ref()
  const huakavisible = ref(false)
  const huankaLoad = ref(false)
  const huakaForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    userId: '',
    cardMultiline: '',
  })
  const userList: any = ref([])
  const delimitation = () => {
    if (cardDetail.value.id) {
      getList()
      huakaForm.cardMultiline = cardDetail.value.card
      huakavisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }
  function getList() {
    useCommon.userListse().then((res: any) => {
      userList.value = res.data
    })
  }
  function handleCancelhuaka() {
    huakaForms.value?.resetFields()
    huakavisible.value = false
    huankaLoad.value = false
  }
  const handleBeforeOkhuakas = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        huankaLoad.value = true
        formpost({
          url: postDisOrder,
          data: () => {
            return {
              userId: huakaForm.userId,
              remarks: huakaForm.remarks,
              cardMultiline: huakaForm.cardMultiline,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              if (res.data.error > 0) {
                Message.error('请先回收此卡，再操作')
              } else {
                Message.success('分销成功')
                cardSeachFn()
                huankaLoad.value = false
                handleCancelhuaka()
              }
            }
          })
          .catch(() => {
            huankaLoad.value = false
          })
      }
    })
  }

  //机卡绑定
  function deleteBindingFn() {
    if (cardDetail.value.id) {
      Modal.warning({
        title: '操作确认',
        content: '确定要机卡重绑吗？',
        cancelText: '取消',
        titleAlign: 'start',
        hideCancel: false,
        okText: '确定',
        onOk: () => {
          get({
            url: binding,
            data: () => {
              return {
                id: cardDetail.value.id,
              }
            },
          }).then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              cardSeachFn()
            }
          })
        },
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }

  //充值记录
  const load1 = ref(false)
  const rebateLists = ref([])
  const orderVisible = ref(false)
  const columns1 = [
    {
      title: '套餐名称',
      key: 'setMealName',
      width: 120,
    },
    {
      title: '订单时间',
      key: 'effectiveState',
      width: 120,
    },
    {
      title: '充值途径',
      key: 'payType',
      width: 120,
    },
    {
      title: '生效状态',
      key: 'effectiveType',
      width: 120,
    },
    {
      title: '订单状态',
      key: 'state',
      width: 120,
    },
    {
      title: '充值时间',
      key: 'createTime',
      width: 190,
    },
  ]

  function doRefreshOrder() {
    if (cardDetail.value.id) {
      orderVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  //充值套餐
  const mealList: any = ref([])
  const mealVisible = ref(false)
  const mealRef = ref()
  const mealForm = ref({
    cardId: '',
    next: 0,
    setMealId: '',
    remarks: '',
  })
  const mealLoad = ref(false)
  //套餐充值弹窗
  function mealFn() {
    if (cardDetail.value.id) {
      get({
        url: userMeal,
        data: () => {
          return {
            seriesIds: cardDetail.value.seriesId,
          }
        },
      }).then((res) => {
        if (res.code == 0) {
          mealList.value = res.data
        }
      })
      mealVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function mealCFn() {
    mealRef.value?.resetFields()
    mealLoad.value = false
    mealVisible.value = false
  }

  function mealSub() {
    mealRef.value?.validate().then((error: any) => {
      if (!error) {
        mealForm.value.cardId = cardDetail.value.id
        mealLoad.value = true
        formpost({
          url: orderpay,
          data: {
            ...mealForm.value,
          },
        })
          .then((res) => {
            if (res.code == 0) {
              mealLoad.value = false
              Message.success('充值成功')
              mealCFn()
              cardSeachFn()
            }
          })
          .catch(() => {
            mealLoad.value = false
          })
      }
    })
  }

  //智能检测
  const detectionVisible = ref(false)
  function openDetection() {
    if (cardDetail.value.id) {
      detectionVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  //复机
  function startFn() {
    if (cardDetail.value.id) {
      Modal.warning({
        title: '操作确认',
        content: '确定要恢复此卡吗？',
        cancelText: '取消',
        titleAlign: 'start',
        hideCancel: false,
        okText: '确定',
        onOk: () => {
          startLoad.value = true
          get({
            url: start,
            data: () => {
              return {
                id: cardDetail.value.id,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Modal.warning({
                  title: '操作报文',
                  content: res.msg,
                  cancelText: '取消',
                  titleAlign: 'start',
                  hideCancel: false,
                  okText: '确定',
                  onOk: () => {},
                })
                startLoad.value = false
                cardSeachFn()
              }
            })
            .catch(() => {
              startLoad.value = false
            })
        },
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }
  //停机
  function stopFn() {
    if (cardDetail.value.id) {
      Modal.warning({
        title: '操作确认',
        content: '确定要停用此卡吗？',
        cancelText: '取消',
        titleAlign: 'start',
        hideCancel: false,
        okText: '确定',
        onOk: () => {
          stopLoad.value = true
          get({
            url: stop,
            data: () => {
              return {
                id: cardDetail.value.id,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Modal.warning({
                  title: '操作报文',
                  content: res.msg,
                  cancelText: '取消',
                  titleAlign: 'start',
                  hideCancel: false,
                  okText: '确定',
                  onOk: () => {},
                })
                stopLoad.value = false
                cardSeachFn()
              }
            })
            .catch(() => {
              stopLoad.value = false
            })
        },
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }

  //刷新
  function RefreshFn(val?: any) {
    if (cardDetail.value.id) {
      refLoad.value = true
      get({
        url: refresh,
        data: () => {
          return {
            id: cardDetail.value.id,
            type: val,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            refLoad.value = false
            cardSeachFn()
          }
        })
        .catch(() => {
          refLoad.value = false
        })
    } else {
      Message.error('请先搜索卡号')
    }
  }

  const loaclCard = ref([])
  const time = ref('')
  //查询卡号
  function cardSeachFn(val?: any) {
    get({
      url: oneCardUrl,
      data: {
        card: cardNum.value,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          let obj = {
            card: cardNum.value,
            time: useCommon.formatDateTime(new Date()),
          }
          // localStorage.removeItem('cards')
          loaclCard.value.forEach((item, index) => {
            if (item.card == obj.card) {
              loaclCard.value.splice(index, 1)
            }
          })
          loaclCard.value.unshift(obj)
          localStorage.setItem('cardse', JSON.stringify(loaclCard.value))
          showTipClose()
          useCommon.state.forEach((val: any) => {
            if (val.state == res.data.state) {
              res.data.stateName = val
            }
          })
          // dataList.value = []
          // checked.value.forEach((item: any) => {
          //   res.data.cardOrders.forEach((items: any) => {
          //     if (item == items.effectiveType) {
          //       dataList.value.push(items)
          //     }
          //   })
          // })
          // daiList.value = []
          // res.data.cardOrders.forEach((items: any) => {
          //   if (items.effectiveType == 0) {
          //     daiList.value.push(items)
          //   }
          // })
          time.value = ''
          dataList.value = []
          res.data.number1 = 0
          res.data.number2 = 0
          res.data.number3 = 0
          if (res.data.series.channel.api) {
            dataList.value = []
            const includes = checked.value.includes(3)
            console.log(includes)
            res.data.cardOrders.forEach((items: any) => {
              if (items.effectiveType == 1) {
                time.value = items.expirationTime
              }
              if (includes) {
                dataList.value.push(items)
              } else {
                if (items.effectiveType == 1) {
                  dataList.value.push(items)
                }
              }
            })
          } else {
            checked.value.forEach((item: any) => {
              res.data.cardOrders.forEach((items: any) => {
                if (items.effectiveType == 1) {
                  time.value = items.expirationTime
                }
                if (item == items.effectiveType) {
                  dataList.value.push(items)
                }
              })
            })
            daiList.value = []
            res.data.cardOrders.forEach((items: any) => {
              if (items.effectiveType == 0) {
                daiList.value.push(items)
                res.data.number3++
              }
              if (items.effectiveType == 1) {
                res.data.number1++
              }
              if (items.effectiveType == 2) {
                res.data.number2++
              }
            })
          }

          rebateLists.value = res.data.cardOrders
          if (res.data.exceptionType) {
            useCommon.error.forEach((val: any) => {
              if (val.state == res.data.exceptionType) {
                res.data.errorName = val.name
                res.data.exceptionForm = val
              }
            })
          }
          if (res.data.used == 0) {
            res.data.bai = 0
          } else {
            res.data.bai = Math.floor((res.data.realUsed / res.data.used) * 100) / 100
          }
          if (res.data.series.shutdownEarly && res.data.series.shutdownEarlyType != null) {
            if (res.data.expirationTime) {
              const num = useCommon.getTimeDifferences1(
                res.data.expirationTime,
                res.data.series.shutdownEarlyType
              )
              if (num <= res.data.series.shutdownEarly) {
                res.data.chong = '未提前续费套餐停机'
              } else {
                res.data.chong = ''
              }
            } else {
              res.data.chong = ''
            }
          }
          cardDetail.value = res.data
          if (val && cardNum.value) {
            Message.success('查询成功')
          }
        }
      })
      .catch(console.log)
  }
</script>

<style>
  .arco-descriptions-border .arco-descriptions-item,
  .arco-descriptions-border .arco-descriptions-item-label-block,
  .arco-descriptions-border .arco-descriptions-item-value-block {
    border-right: 1px solid #f2f3f5 !important;
  }
</style>

<style lang="less" scoped>
  .between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  :deep(.arco-descriptions-border .arco-descriptions-row:not(:last-child)) {
    border-bottom: 1px solid #f2f3f5 !important;
  }
  :deep(.arco-table-border .arco-table-tr .arco-table-th) {
    border-bottom: 1px solid #f2f3f5 !important;
  }
  :deep(.arco-table-td) {
    border-bottom: 1px solid #f2f3f5 !important;
  }
  :deep(.arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-track-direction-horizontal) {
    border-bottom: 1px solid #f2f3f5 !important;
    border-top: 0;
  }
  :deep(.arco-descriptions-item-value-block) {
    border-right: 1px solid #f2f3f5 !important;
    border-left: 1px solid #f2f3f5 !important;
  }

  .imgsa1 {
    width: 70px;
    height: 70px;
  }
  .imgsa {
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
  .col-div {
    margin-top: 5px;
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .col-div .arco-col {
    margin-bottom: 10px;
  }
  .padding20 {
    padding: 0 20px;
    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px 10px 0px;

      .line {
        width: 4px;
        height: 15px;
        margin-right: 8px;
        background-color: #3491fa;
      }
      .text {
        display: flex;
        align-items: center;
      }
    }
    .display-box {
      display: flex;
      .display-right {
        margin-left: 20px;
        .text {
          font-size: 13px;
          color: #86909c;
          line-height: 23px;
        }
        .text-name {
          font-size: 15px;
          line-height: 25px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .box-top {
    width: 100%;
    height: 115px;
    border-radius: 5px;
    background-color: #f5f5f5;
    padding: 22.5px;
    display: flex;
    align-items: center;
    .top-item {
      width: 25%;
      height: 70px;
      .title1 {
        line-height: 35px;
        color: #86909c;
        font-size: 16px;
      }
      .num {
        line-height: 35px;
        font-size: 18px;
      }
    }
    .top-items {
      width: 25%;
      border-left: 1px solid #c9cdd4;
      height: 70px;
      padding-left: 22.5px;
      .title1 {
        line-height: 35px;
        color: #86909c;
        font-size: 16px;
      }
      .num {
        line-height: 35px;
        font-size: 18px;
      }
    }
  }
  .timeBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    .time-box-item {
      display: flex;
      width: calc((100% - 80px) / 5);
      background-color: var(--color-bg-2);
      border-radius: 5px;
      padding: 10px;
      .img {
        width: 20px;
        height: 20px;
      }
      .text {
        margin-left: 10px;
        .blue {
          color: #3491fa;
          font-size: 13px;
        }
        .red {
          color: red;
          font-size: 13px;
        }
        .time {
          font-size: 11px;
          margin-top: 5px;
        }
      }
    }
  }
  :deep(.arco-input-wrapper .arco-input-clear-btn) {
    margin-right: 10px;
  }
  :deep(.arco-collapse-item .arco-collapse-item-icon-right) {
    right: 0;
  }
  :deep(.arco-collapse-item-header-right) {
    padding-right: 20px;
  }
  :deep(.arco-descriptions-border .arco-descriptions-body) {
    border: 0;
  }

  .detail {
    :deep(.arco-scrollbar-container) {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    :deep(.arco-table-container) {
      border-radius: 5px;
    }
    :deep(.arco-table-border .arco-table-scroll-y) {
      border-bottom: 0;
    }
    :deep(.arco-table-pagination) {
      margin-top: 0px;
      background-color: var(--color-fill-1);
    }
    :deep(.arco-table-th) {
      background-color: var(--color-bg-2);
    }
    .box {
      :deep(.arco-radio-button-content) {
        width: 100px;
        line-height: 35px;
        text-align: center;
      }
    }
  }

  :deep(.arco-descriptions-border .arco-descriptions-item-label-block) {
    background-color: transparent;
  }
  :deep(.arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled)) {
    margin-bottom: 0px !important;
  }
  :deep(.arco-input-append) {
    padding: 0px;
  }
  :deep(.arco-input-wrapper) {
    padding-right: 0;
    border-radius: 0;
  }
  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: none;
    }
  }
  // .input {
  //   :deep(.arco-input-wrapper) {
  //     border: 0;
  //   }
  // }
  :deep(.arco-pagination-item-active, .arco-pagination-item-active:hover) {
    background-color: var(--color-fill-1) !important;
  }

  :deep(.arco-pagination-item-active) {
    color: #3491fa !important;
    background-color: none !important;
  }
  .table {
    .title {
      padding: 0 1px;
      display: flex;
      background-color: var(--color-fill-1);
      .name {
        width: 188px;
        line-height: 45px;
        text-align: center;
        // background-color: var(--color-neutral-4);
      }
    }
    .list {
      box-sizing: border-box;
      display: flex;
      border-bottom: 1px solid var(--color-neutral-3);
      border-left: 1px solid var(--color-neutral-3);
      border-right: 1px solid var(--color-neutral-3);
      .names {
        width: 188px;
        line-height: 45px;
        text-align: center;
      }
      .namesa {
        width: 376px;
        line-height: 45px;
        text-align: center;
      }
    }
  }

  .error {
    margin-left: 10px;
    background-color: var(--color-bg-2);
    line-height: 30px;
    width: 329px;
    border: 1px solid #f53f3f;
    border-radius: 5px;
    padding-left: 10px;
    color: #f53f3f;
    font-size: 13px;
  }

  :deep(.arco-radio-button.arco-radio-checked) {
    background: linear-gradient(to right, #3491fa, #aad2ff, #6bb3ff, #9fd4fd) !important;
    color: var(--color-bg-2);
  }

  .right-line {
    :deep(.arco-radio-button-content) {
      width: 200px;
      line-height: 32px;
      text-align: center;
    }
    margin-bottom: 20px;
  }
  :deep(.arco-radio-group-button) {
    // background-color: var(--color-bg-2);
  }

  :deep(.arco-radio-button:hover) {
    background: linear-gradient(to right, #3491fa, #aad2ff, #6bb3ff, #9fd4fd) !important;
    color: var(--color-bg-2);
  }
  :deep(.arco-radio-button) {
    margin: 0px;
  }
  :deep(.arco-radio-group-button) {
    padding: 0px;
  }
  .white {
    background-color: #fff;
  }

  .box {
    display: flex;
    align-items: center;
    height: 35px;
    .text {
      font-size: 15px;
    }

    .line {
      width: 3px;
      height: 15px;
      margin-right: 5px;
      background-color: #3491fa;
    }
  }

  .box1 {
    display: flex;
    align-items: center;
    height: 15px;
    .text {
      font-size: 15px;
    }

    .line {
      width: 3px;
      height: 15px;
      margin-right: 5px;
      background-color: #3491fa;
    }
  }

  .detail {
    // padding: 20px;
    // background-color: var(--color-bg-2);
    margin-top: 20px;
    border-radius: 5px;
  }

  .details {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--color-bg-2);
    border-radius: 5px;
  }
  #popup {
    :deep(.arco-input-wrapper) {
      background-color: var(--color-bg-2);
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
      padding-left: 10px;
    }
    :deep(.arco-btn) {
      height: 35px;
      border-radius: 0 !important;
      border-top-right-radius: 5px !important;
      border-bottom-right-radius: 5px !important;
    }
    :deep(.arco-input-focus) {
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
    :deep(.arco-table-pagination) {
      margin-top: 0px;
      background-color: var(--color-fill-1);
      border-bottom-right-radius: 10px !important;
      border-bottom-left-radius: 10px !important;
    }
    :deep(.arco-btn-primary, .arco-btn-primary[type='button'], .arco-btn-primary[type='submit']) {
      background: linear-gradient(to right, #3491fa, #aad2ff, #6bb3ff, #9fd4fd) !important;
      border: 0;
    }
    :deep(.arco-input-wrapper .arco-input-prefix) {
      padding-right: 10px;
    }
  }

  :deep(.arco-collapse) {
    border: 0 !important;
    background-color: transparent !important;
  }

  :deep(.arco-collapse-item-header-right + .arco-collapse-item-content) {
    padding-left: 0px !important;
  }
  :deep(.arco-collapse-item-content) {
    padding-right: 0px !important;
    background-color: transparent;
  }
  :deep(.arco-collapse-item-header) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: transparent;
  }

  :deep(.arco-collapse-item-content-box) {
    background-color: transparent;
    padding: 0;
  }

  :deep(.arco-collapse-item-active > .arco-collapse-item-header) {
    border: 0 !important;
  }

  :deep(.arco-collapse-item-header-right) {
    padding-left: 0 !important;
    transition: none;
  }

  .img {
    width: 50px;
    height: 50px;
  }

  .sq {
    width: 60px;
    // border: 1px solid #ebeef5;
    border-radius: 5px;
    margin-right: 30px;
    text-align: center;
  }

  img {
    vertical-align: bottom;
  }

  .bottomTable {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .box_3 {
      min-height: 300px;
      padding: 20px;
      border-radius: 5px;
      background-color: var(--color-bg-2);

      :deep(.bcg) {
        padding: 0px;
      }

      .tops {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .times {
          .noactive {
            color: var(--color-neutral-10);
            margin-left: 10px;
            cursor: pointer;
          }

          .actives {
            color: #3491fa;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .top {
    background-color: var(--color-bg-2);
    border-radius: 5px;
    padding: 20px;
    .tops {
      width: 100%;
      font-size: 16px;
    }
  }
  #popup {
    position: relative;
  }
  .contex-menu-wrapper {
    position: absolute;
    z-index: 99999;
    top: 32px;
    width: 500px;
    margin-top: 5px;
    border-radius: 5px;
    // background-color: var(--color-neutral-4);
    // border-bottom: 1px solid var(--color-neutral-3);
    // border-left: 1px solid var(--color-neutral-3);
    // border-right: 1px solid var(--color-neutral-3);
    box-shadow: 0 2px 8px #00000026;
  }

  .imgsa {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
</style>
